'use client';

import { motion } from 'framer-motion';
import { useState, useEffect } from 'react';
import Link from 'next/link';
import Image from 'next/image';
import FloatingSquares from '@/components/FloatingSquares';
import FeatureSection from '@/components/FeatureSection';
import AccountingServices from '@/components/AccountingServices';
import Partners from '@/components/Partners';
import Advantages from '@/components/Advantages';

const navigation = [
  { name: '首页', href: '/' },
  { name: '注册公司', href: '/register' },
  { name: '代理记账', href: '/accounting' },
  { name: '税务筹划', href: '/tax' },
  { name: '工商服务', href: '/business' },
  { name: '关于我们', href: '/about' },
  { name: '联系我们', href: '/contact' }
];

const services = [
  {
    title: '注册公司',
    description: '专业提供公司注册、变更、注销等一站式服务',
    href: '/register',
  },
  {
    title: '代理记账',
    description: '为企业提供专业的记账、报税、财务分析等服务',
    href: '/accounting',
  },
  {
    title: '税务筹划',
    description: '合理规划税务，助力企业降本增效',
    href: '/tax',
  },
  {
    title: '工商服务',
    description: '提供工商变更、注销等一站式工商服务',
    href: '/business',
  },
];

const NavigationContent = ({ isScrolled }: { isScrolled?: boolean }) => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="relative">
      {/* Desktop menu */}
      <div className="hidden sm:flex items-center space-x-4 lg:space-x-8">
        {navigation.map((item) => (
          <Link 
            key={item.name}
            href={item.href} 
            className={`${
              isScrolled ? 'text-gray-900' : 'text-white'
            } hover:text-blue-500 transition-colors text-sm lg:text-base`}
          >
            {item.name}
          </Link>
        ))}
      </div>

      {/* Mobile menu button */}
      <div className="sm:hidden">
        <button
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          className={`${
            isScrolled ? 'text-gray-900' : 'text-white'
          } p-2 focus:outline-none`}
          aria-label="菜单"
        >
          {!isMenuOpen ? (
            <svg
              className="h-6 w-6"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
          ) : (
            <svg
              className="h-6 w-6"
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          )}
        </button>
      </div>

      {/* Mobile menu dropdown */}
      {isMenuOpen && (
        <div className="absolute top-full right-0 w-48 bg-white shadow-lg rounded-lg mt-2">
          <div className="py-1">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                onClick={() => setIsMenuOpen(false)}
              >
                {item.name}
              </Link>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default function Home() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 75);
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <main className="min-h-screen">
      {/* Fixed Navigation (appears on scroll) */}
      <nav className={`fixed top-0 left-0 right-0 bg-white shadow-md z-50 transform transition-transform duration-300 ${
        isScrolled ? 'translate-y-0' : '-translate-y-full'
      }`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex items-center">
              <Link href="/" className="flex items-center">
                <Image
                  src="/logo.png"
                  alt="Logo"
                  width={40}
                  height={40}
                  className="mr-2"
                />
                <span className="text-lg font-semibold text-gray-900 hidden sm:block">
                  江苏苏科会计服务有限公司
                </span>
                <span className="text-lg font-semibold text-gray-900 sm:hidden">
                  苏科会计
                </span>
              </Link>
            </div>
            <div className="hidden sm:flex sm:items-center sm:space-x-4">
              {navigation.map((item) => (
                <Link
                  key={item.name}
                  href={item.href}
                  className="text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors"
                >
                  {item.name}
                </Link>
              ))}
            </div>
            <div className="flex items-center sm:hidden">
              <button
                type="button"
                className="inline-flex items-center justify-center p-2 rounded-md text-gray-900 hover:text-blue-600"
                onClick={() => setIsMenuOpen(!isMenuOpen)}
              >
                <span className="sr-only">打开菜单</span>
                {!isMenuOpen ? (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                ) : (
                  <svg
                    className="block h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M6 18L18 6M6 6l12 12"
                    />
                  </svg>
                )}
              </button>
            </div>
          </div>
          {/* Mobile menu */}
          {isMenuOpen && (
            <div className="sm:hidden bg-white">
              <div className="px-2 pt-2 pb-3 space-y-1">
                {navigation.map((item) => (
                  <Link
                    key={item.name}
                    href={item.href}
                    className="text-gray-900 hover:text-blue-600 block px-3 py-2 rounded-md text-base font-medium transition-colors"
                    onClick={() => setIsMenuOpen(false)}
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
            </div>
          )}
        </div>
      </nav>

      {/* Banner Section */}
      <section className="relative h-screen">
        {/* Background Image */}
        <div className="absolute inset-0">
          <Image
            src="/images/banner2.jpg"
            alt="会计服务背景"
            fill
            style={{ objectFit: 'cover' }}
            priority
          />
          <div className="absolute inset-0 bg-black opacity-50" />
        </div>

        {/* Banner Content */}
        <div className="relative h-full flex flex-col">
          {/* Banner Navigation */}
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center h-20">
              <div className="flex items-center">
                <Image
                  src="/images/logo.png"
                  alt="Logo"
                  width={40}
                  height={40}
                  className="mr-2"
                />
                <Link href="/" className="text-white hover:text-gray-200 transition-colors">
                  <span className="text-lg font-bold">
                    江苏苏科会计服务有限公司
                  </span>
                </Link>
              </div>
              <div className="hidden sm:flex items-center space-x-6">
                {navigation.map((item) => (
                  <Link 
                    key={item.name}
                    href={item.href} 
                    className="text-white hover:text-blue-400 transition-colors text-sm"
                  >
                    {item.name}
                  </Link>
                ))}
              </div>
              {/* Mobile menu button */}
              <div className="sm:hidden">
                <button
                  onClick={() => setIsMenuOpen(!isMenuOpen)}
                  className="text-white p-2 focus:outline-none"
                  aria-label="菜单"
                >
                  <svg
                    className="h-6 w-6"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M4 6h16M4 12h16M4 18h16"
                    />
                  </svg>
                </button>
              </div>
            </div>
          </div>

          {/* Banner Text Content */}
          <div className="flex-grow flex items-center justify-center px-4">
            <div className="text-center max-w-4xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8 }}
              >
                <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-white mb-6">
                  专业的会计服务提供商
                </h1>
                <p className="text-base sm:text-lg leading-7 text-gray-200 max-w-2xl mx-auto mb-8 px-4">
                  江苏苏科会计服务有限公司致力于为企业提供全方位的会计服务解决方案，
                  包括公司注册、代理记账、税务筹划、商标注册等专业服务。
                </p>
                <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 px-4">
                  <Link
                    href="/contact"
                    className="w-full sm:w-auto rounded-md bg-primary px-6 py-3 text-base font-semibold text-white shadow-sm hover:bg-primary/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary text-center"
                  >
                    联系我们
                  </Link>
                  <Link 
                    href="/about" 
                    className="w-full sm:w-auto text-base font-semibold leading-6 text-white hover:text-gray-200 text-center"
                  >
                    了解更多 <span aria-hidden="true">→</span>
                  </Link>
                </div>
              </motion.div>
            </div>
          </div>
        </div>

        {/* Floating Squares */}
        <FloatingSquares />
      </section>

      {/* Content Sections */}
      <div className="bg-white">
        <FeatureSection />
        <AccountingServices />
        <Advantages />
        <Partners />
      </div>
    </main>
  );
}
